@import 'variables'
@import 'mixins'
@import 'nib'

@keyframes neo4j-pulse {
  0%, 100% {
    color: #1bf621;
  }
  50% {
    color: #00a3ff;
  }
}

@keyframes move-ball-one
    0%
      opacity: 1
      transform:translate(-5px,-14px), scale(1)
    20%
      opacity: 0
      transform:translate(-2.5px,-7px), scale(0.5)
    100%
      opacity: 1
      transform:translate(-5px,-14px), scale(1)

@keyframes move-ball-two
    0%
      opacity: 1
      transform:translate(10px,-7px), scale(1)
    40%
      opacity: 0
      transform:translate(5px,-3.5px), scale(0.5)
    100%
      opacity: 1
      transform:translate(10px,-7px), scale(1)

@keyframes move-ball-three
    0%
      opacity: 1
      transform:translate(-1px,11px), scale(1)
    60%
      opacity: 0
      transform:translate(-0.5px,5.5px), scale(0.5)
    100%
      opacity: 1
      transform:translate(-1px,11px), scale(1)

#nav
  ul.bottom
    position: absolute
    bottom: 0
    padding: 0
    margin: 0
    li
      border-bottom: none
      border-top: 1px solid #5D6370
  user-select: none
  > .nav
    padding: 0
    &.bottom
      position: absolute
      bottom: 0
      border-bottom: none
    > li
      padding: 0
      margin: 0
      border-bottom: 1px solid #5D6370
      position: relative

      // fix quirk with item not being selected when clicking moving balls
      .cover
        stretch()
        cursor: pointer
        z-index: 1
        left: -10px

      .database, .favorites, .guides, .preferences, .credits
        padding-top: 3px
        line-height: 67px
      .cloud
        padding-top: 6px
        line-height: 64px

      &.nav-header
        &.active
          border-color: #2D2F36
          .ball
            background: #06E267
            background: linear-gradient(top, #41FF95, #06E267)
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4)
          > a
            //background-color: #202930
        > a
          line-height: 72px
          // text-indent: -9999px
      > a
        line-height: 70px
        text-align:  center
        width:       80px
        position:    relative
        box-shadow:  none
        padding:     0
        margin:      0
        text-shadow: none
        color:       navbar-color-fg
        font-size:   28px
        font-weight: 200
        &:hover
          color: #fff
          background: none
          &.database
            color: color-database
          &.favorites
            color: color-favorites
          &.guides
            color: color-guides
          &.cloud
            color: color-cloud
          &.preferences
            color: color-preferences
          &.credits
            animation: neo4j-pulse 2s infinite;
            animation-timing-function: ease-in-out;
            // font-weight: 300
        .avatar
          width: 40px
          height: 40px
          background-size: cover
          position: absolute
          top: 15px
          left: 20px
          border-radius: 50%
          border: 2px solid #d8dde2
      &.active
        > a
          // color: #fff
          // text-shadow: 0 1px 2px rgba(0,0,0,0.4)
          background-color: drawer-color-bg
        > .database
          color: color-database
        > .favorites
          color: color-favorites
        > .guides
          color: color-guides
        > .cloud
          color: color-cloud
        > .preferences
          color: color-preferences
        > .credits
          font-weight: 300
  absolute: top left
  width: 80px
  bottom: 0
  background: navbar-color-bg

  .nav-header:hover .ball
    background: #fff
    background: linear-gradient(top, #fff, #fff)

  .logo
    absolute: top 35px left 35px
    .ball
      transist: all
      background: #fff
      background: linear-gradient(top, #fff, #fff)
      &.one
        absolute: top -4px left -4px
        transform: translate(-5px,-14px)
        circle(9px)
      &.two
        absolute: top -8px left -8px
        transform: translate(10px,-7px)
        circle(17px)
      &.three
        absolute: top -6px left -6px
        transform: translate(-1px,11px)
        circle(13px)

    &.loading
      .ball
        &.one
          animation: move-ball-one 1200ms cubic-bezier(0.694, 0.0482, 0.335, 1) infinite
        &.two
          animation: move-ball-two 1200ms cubic-bezier(0.694, 0.0482, 0.335, 1) infinite
        &.three
          animation: move-ball-three 1200ms cubic-bezier(0.694, 0.0482, 0.335, 1) infinite

  .nav-header:hover
    .ball
      &.one
        transform: translate(-15px,0px)
      &.two
        transform: translate(19px,0px)
      &.three
        transform: translate(0px,0px)

.connection-error #nav
  .nav-list > li.nav-header
    border-color: #912C22
    > a
      background-color: #912C22
    .ball
      background: color-error
      box-shadow: none
